<template>
  <div class="daily-recommend__container" v-if="data">
    <div class="daily-recommend">
      <div class="title">{{ title }}</div>
      <div class="screenplay">
        <div class="pre-line" v-html="data.title"></div>
        <div class="pre-line" v-html="data.screenPlay"></div>
      </div>
      <div class="tools">
        <div class="retry" @click="handleRetry" v-if="!isHistory"><i class="retry-icon" :class="{ 'rotate-icon': rotating }"></i>重新生成</div>
        <div class="retry" v-else></div>
        <div class="btn">
          <button class="tools-btn" id="copy" @click="handleCopy">{{ fitIpPosition ? "复制内容" : "复制文案" }}</button>
          <div v-if="!fitIpPosition">
            <button v-if="btnType == 1" class="tools-btn" @click="goShoot">去拍摄</button>
            <button v-else class="tools-btn" @click="goShoot">生成海报</button>
          </div>
        </div>
      </div>
    </div>
    <div class="feed-back" v-if="!hasFeedback && !fitIpPosition">
      <div class="tag" v-for="(item, index) in feedbackTag" :key="index">
        <span v-html="item.icon"></span>
        <span class="tag-text" @click="handleFeedback(index)">{{ item.name }}</span>
      </div>
    </div>
    <div class="try-again flex-center" @click="tryAgain" v-if="fitIpPosition && !isHistory">
      <div>再试一次?</div>
      <img class="unfold" :src="leftArrow" />
    </div>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { ref, watch } from "vue";
import { getAccountInfos } from "@/../utils";
import { collectEvent } from "@/../utils/bridge";
import { useRouter } from "vue-router";
import unfold from "../../asset/icons/blue_unfold@3x.png";
import leftArrow from "../../asset/icons/left_arrow@3x.png";
const router = useRouter();

// 获取userId（用于埋点）
const userId = ref("");
const getUserId = async () => {
  // const agentNo = "1120103025"; // 测试用
  const { agentNo } = await getAccountInfos();
  userId.value = agentNo;
};
getUserId();

// 接收数据
const props = defineProps({
  dailyRecommend: {
    type: Object,
  },
  title: {
    type: String,
    default: "原创内容每日推荐",
  },
  isHistory: {
    type: Boolean,
    default: false,
  },
  fitIpPosition: {
    type: Boolean, // 适配下IP定位页面
    default: false,
  },
  btnType: {
    type: String,
    default: "1",
  },
});
const data = ref([]);
watch(
  () => props.dailyRecommend,
  (newVal) => {
    data.value = newVal;
  },
  { deep: true, immediate: true }
);

// 定义反馈标签
const feedbackTag = [
  {
    icon: "&#128577",
    name: "没有用",
  },
  {
    icon: "&#128522",
    name: "有帮助",
  },
];

// 按钮事件
const emit = defineEmits(["doRetry", "tryAgain"]);
const hasFeedback = ref(false);
const rotating = ref(false);

const handleRetry = () => {
  setTimeout(() => {
    traceRetry(userId.value, data.value.promptId);
  }, 500);
  rotating.value = true;
  setTimeout(() => {
    rotating.value = false;
  }, 800);
  emit("doRetry", data.value.promptId);
};

const handleCopy = () => {
  setTimeout(() => {
    traceCopy(userId.value, data.value.promptId);
  }, 500);
  if (data.value.title || data.value.screenPlay) {
    let clipboard = new ClipboardJS("#copy", {
      text: () => {
        return `${data.value.title}\n${data.value.screenPlay}`; // 要复制的文本
      },
    });
    clipboard.on("success", () => {
      clipboard.destroy();
      Toast("复制成功！");
    });
    clipboard.on("error", () => {
      Toast("复制异常 请重试！");
      clipboard.destroy();
    });
  } else {
    Toast("暂无可复制文案！");
  }
};

const handleFeedback = (index) => {
  Toast("已反馈");
  index ? (index = 0) : (index = 1);
  setTimeout(() => {
    traceFeedback(userId.value, data.value.promptId, index);
  }, 500);
  setTimeout(() => {
    hasFeedback.value = true;
  }, 1000);
};

const goShoot = () => {
  setTimeout(() => {
    traceGoShot(userId.value, data.value.promptId);
  }, 500);
  if (props.btnType == 2) {
    console.log("goShoot 画报");
    window.location.href = `https://esales-local/ask_bob#visit?encodeJumpUrl=aipage://1130?title=${data.value.title}&content=${data.value.screenPlay}`;
  } else {
    console.log("goShoot capture");
    window.location.href = `https://esales-local/ask_bob#visit?encodeJumpUrl=aipage://1113?videoId=personalCreation&isNeedModify=false&title=${data.value.title}&screenPlay=${data.value.screenPlay}`;
  }
};

// 再试一次IP定位
const tryAgain = () => {
  emit("tryAgain");
};

// 埋点
const traceRetry = async (empno, textNum) => {
  console.log("traceRetry", empno);
  await window.TrackPoint.pageStart("P02824");
  setTimeout(() => {
    collectEvent({
      eventId: "C12513", // 事件id
      eventTitle: "AI视频脚本-点击重新生成", // 事件名称
      parameters: {
        empno,
        textNum,
        IP: JSON.parse(window.localStorage.getItem("IP")),
      },
    });
  }, 500);
};
const traceFeedback = async (empno, textNum, isTrue) => {
  console.log("traceFeedback");
  await window.TrackPoint.pageStart("P02824");
  setTimeout(() => {
    collectEvent({
      eventId: "C12514", // 事件id
      eventTitle: "AI视频脚本-点击是否有用", // 事件名称
      parameters: {
        empno,
        textNum,
        isTrue,
        IP: JSON.parse(window.localStorage.getItem("IP")),
      },
    });
  }, 500);
};
const traceGoShot = async (empno, textNum) => {
  console.log("traceGoShot");
  await window.TrackPoint.pageStart("P02824");
  setTimeout(() => {
    collectEvent({
      eventId: "C12515", // 事件id
      eventTitle: "AI视频脚本-点击拍摄文案", // 事件名称
      parameters: {
        empno,
        textNum,
        IP: JSON.parse(window.localStorage.getItem("IP")),
      },
    });
  }, 500);
};
const traceCopy = async (empno, textNum) => {
  console.log("traceCopy");
  await window.TrackPoint.pageStart("P02824");
  setTimeout(() => {
    collectEvent({
      eventId: "C12516", // 事件id
      eventTitle: "AI视频脚本-点击复制文案", // 事件名称
      parameters: {
        empno,
        textNum,
        IP: JSON.parse(window.localStorage.getItem("IP")),
      },
    });
  }, 500);
};
</script>

<style lang="less" scoped>
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.daily-recommend__container {
  // width: 345px;
  margin-top: 15px;

  .daily-recommend {
    // width: 345px;
    background: #f7f7f7;
    border-radius: 12px;

    .title {
      background: #f7f7f7;
      // box-shadow: inset 0px -1px 0px 0px rgba(191, 191, 191, 0.1);
      border-radius: 12px 12px 0px 0px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);
      letter-spacing: 0;
      line-height: 20px;
      font-weight: 500;
      height: 45px;
      display: flex;
      align-items: center;
      padding-left: 15px;
    }

    .screenplay {
      padding: 0px 15px 0px 15px;

      .pre-line {
        white-space: pre-line;
      }
    }

    .tools {
      width: 100%;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 15px;
      margin-top: 5px;

      .retry {
        font-family: PingFangSC-Regular;
        font-size: 11px;
        color: rgba(0, 0, 0, 0.6);
        letter-spacing: 0;
        font-weight: 400;
        height: 16px;
        display: flex;
        align-items: center;
        margin-left: 15px;

        .retry-icon {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url("../../asset/icons/icon_refresh@3x.png") no-repeat;
          background-size: 100% 100% !important;
          margin-right: 3px;
        }

        .rotate-icon {
          animation: rotate 2s linear;
        }
      }

      .btn {
        display:flex;
        
        .tools-btn {
          width: auto;
          height: 32px;
          border: 0;
          background: rgba(84, 139, 246, 0.1);
          border-radius: 16px;
          padding: 6px 12px;
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #5377f8;
          letter-spacing: 0;
          text-align: center;
          line-height: 20px;
          font-weight: 500;
        }

        :nth-child(1) {
          margin-right: 10px;
        }
      }
    }
  }

  .feed-back {
    margin-top: 5px;
    display: flex;
    width: 160px;
    justify-content: space-between;

    .tag {
      width: 76px;
      height: 28px;
      background: #f7f7f7;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;

      .tag-text {
        opacity: 0.8;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #272930;
        text-align: justify;
        line-height: 21px;
        font-weight: 400;
      }
    }
  }

  .try-again {
    width: 106px;
    height: 40px;
    background: rgb(247, 247, 247, 0.5);
    display: flex;
    margin-top: 5px;
    padding:0 10px;
    border-radius: 10px;
    justify-content: space-between;
    font-size: 14px;
    font-family: PingFang SC;

    .unfold {
      width: 14px;
      height: 14px;
      margin-left: 3px;
    }
  }
}
</style>